                  0<!--
 * @Author: yhy
 * @Date: 2022-03-18 09:26:02
 * @LastEditTime: 2022-04-08 17:29:56
 * @LastEditors: yhy
 * @Description:
-->
<template>
  <div>
    <!-- 顶部导航 -->
    <div>
      <van-nav-bar left-arrow :placeholder="true" fixed>
        <template #left>
          <img src="@/assets/toutiao_logo.png" alt="" class="logo" />
        </template>
        <template #right>
          <van-icon name="search" size=".48rem" color="#fff" @click="moveSearchFn" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 顶部Tab栏 -->
    <div>
      <van-tabs
        v-model="active"
        sticky
        swipeable
        animated
        offset-top="1.22667rem"
        @change="channelChangeFn"
      >
        <van-tab
          :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id"
        >
          <!-- 内容区域 -->
          <ArticleLis :channelId="active"></ArticleLis>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      />
      <van-popup v-model="show" class="popupClass" get-container="body">
        <ChannelEdit
          :userList="userChannelList"
          :unCheckList="unCheckChannelList"
          @channelEv="channelFn"
          @channelRemoveEv="channelRemoveFn"
          @closeEV="closeFn"
          v-model="active"
        ></ChannelEdit>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 导入 获取用户频道接口
import ChannelEdit from './ChannelEdit.vue'
import {
  getUserChannelsApi,
  getAllChannelsApis,
  updateChannelsApi,
  removeChannelsApi
} from '@/api'
// 引入文章组件
import ArticleLis from './Article/ArticleList.vue'
export default {
  data () {
    return {
      active: 0,
      userChannelList: [], // 获取用户频道
      allChannelList: [], // 获取所有频道
      show: false // 控制弹出层是否展示
    }
  },
  methods: {
    // tab 栏切换 触发事件
    async channelChangeFn () {
      // 以迁移到 ArticleList 组件内
    },
    // 控制弹出层是否显示
    showPopup () {
      this.show = true
    },
    closeFn () {
      this.show = false
    },
    // 控制用户频道选择 用户未选频道会通过下面的计算属性选出
    async channelFn (obj) {
      this.userChannelList.push(obj)
      // 向后端发起请求 修改数据 方式一(解决引用数据类型浅拷贝问题)
      // 需要用let 但是eslint 不让使用let关键字 需要关闭该检查
      // 可以尝试用解构赋值不使用 let 关键字
      // let newArr = []
      // newArr.push(this.userChannelList.filter((obj) => {
      //   return obj.id !== 0
      // }))
      // newArr.forEach((obj, index) => {
      //   delete obj.name
      //   obj.seq = index
      // })
      // updateChannelsApi({
      //   newArr
      // })

      // 老师的代码
      const newArr = this.userChannelList.filter((obj) => {
        return obj.id !== 0
      })
      const thenNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝(浅拷贝)
        delete newObj.name
        newObj.esq = index
        return newObj
      })
      const res = await updateChannelsApi({
        channels: thenNewArr
      })
      console.log(res)
    },
    // 删除用户频道
    channelRemoveFn (Obj) {
      const List = this.userChannelList.findIndex((obj) => {
        return obj === Obj
      })
      this.userChannelList.splice(List, 1)
      removeChannelsApi(Obj.id)
    },
    // 搜索图表事件
    moveSearchFn () {
      this.$router.push('/search')
    }
  },
  async created () {
    // 获取频道列表
    const res = await getUserChannelsApi()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    // // 首次获取文章列表
    // this.channelChangeFn()

    // 获取所有频道列表
    const res2 = await getAllChannelsApis()
    this.allChannelList = res2.data.data.channels
  },
  components: {
    ArticleLis,
    ChannelEdit
  },
  computed: {
    // 目标: 把所有数组挨个遍历,去用户已选频道找, 如果找不到 filter 就放到一个新数组里
    unCheckChannelList () {
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.userChannelList.findIndex((smallObj) => {
          return smallObj.id === bigObj.id
        })

        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })

      return newArr
    }
  }
}
</script>

<style lang='less' scoped>
.logo {
  width: 100px;
  height: 30px;
}
.box {
  height: 2000px;
}
/deep/ .van-tabs__line {
  background-color: #007bff;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 设置弹出层样式
.popupClass {
  width: 100vw;
  height: 100vh;
}
</style>
